<template>
    <div style="margin: 10px;">
        <el-skeleton :loading="data.isFisrt" animated :rows="10">
            <el-descriptions title="客户详情" border direction="vertical" :column="3">
                <template #extra>
                    <div v-if="!data.isEdit">
                        <el-button @click="event.edit" type="primary" round>编辑</el-button>
                    </div>
                    <div v-else>
                        <el-popconfirm @confirm="event.save" title="确认要保存吗？">
                            <template #reference>
                                <el-button type="primary" round>保存</el-button>
                            </template>
                        </el-popconfirm>
                    </div>
                </template>
                <el-descriptions-item label="客户名称*" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.name }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.name">
                    </el-input>
                </el-descriptions-item>

                <el-descriptions-item label="电话*" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.phone }}</el-tag>
                    </template>
                    <el-input v-else type="text" maxlength="11" v-model="data.data.phone">
                    </el-input>

                </el-descriptions-item>
                <el-descriptions-item label="微信*" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.wechat }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.wechat">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="地址*" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.address }}</el-tag>
                    </template>
                    <el-input v-else type="text" v-model="data.data.address">
                    </el-input>
                </el-descriptions-item>
                <el-descriptions-item label="负责人*" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.responsibility }}</el-tag>
                    </template>

                    <el-select v-else v-model="data.data.responsibility" filterable remote reserve-keyword
                        placeholder="请输入关键词" :remote-method="event.remoteMethod" :loading="data.loading">
                        <el-option v-for="item in data.responsibility_list" :key="item.id" :label="item.name"
                            :value="item.id">
                            <el-tag type="danger">{{ item.name }}</el-tag>
                        </el-option>
                    </el-select>

                </el-descriptions-item>
                <el-descriptions-item label="备案人*" width="33%">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.record }}</el-tag>
                    </template>
                    <el-select v-else v-model="data.data.record" filterable remote reserve-keyword placeholder="请输入关键词"
                        :remote-method="event.remoteMethod" :loading="data.loading">
                        <el-option v-for="item in data.record_list" :key="item.id" :label="item.name" :value="item.id">
                            <el-tag type="danger">{{ item.name }}</el-tag>
                        </el-option>

                    </el-select>
                </el-descriptions-item>

                <el-descriptions-item label="下次联系时间*" width="33%">
                    <el-tag> {{ data.data.nexttime }}</el-tag>
                </el-descriptions-item>

                <el-descriptions-item label="进入公海时间*" width="33%">
                    <el-tag> {{ data.data.sears }}</el-tag>
                </el-descriptions-item>

             
                <el-descriptions-item label="跟踪时间*" width="33%">
                    <el-tag> {{ data.data.followtime }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="类别*" width="33%">
                    <el-tag> {{ data.data.type }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="来源*" width="33%">
                    <el-tag> {{ data.data.source }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="级别*" width="33%">
                    <el-tag> {{ data.data.level == 1 ? "成功" : "待定" }}</el-tag>
                </el-descriptions-item>
                <el-descriptions-item label="备注(选填)*" :span="3">
                    <template v-if="!data.isEdit">
                        <el-tag> {{ data.data.remark }}</el-tag>
                    </template>
                    <el-input v-else type="textarea" v-model="data.data.remark">
                    </el-input>
                </el-descriptions-item>
            </el-descriptions>
        </el-skeleton>
    </div>
</template>

<script setup lang="ts">
import { GetAllUsers, GetCustomerById, UpdateCustomer } from '@/api/customer';
import type { customer_Dto } from '@/Dto/Request/customer/customer_Dto';
import Api_Code from '@/Dto/Response/Api_code';
import router from '@/router';
import { closeloading, startloading } from '@/utils/loading';
import { msg } from '@/utils/msg';
import dayjs from 'dayjs';
import { el } from 'element-plus/es/locales.mjs';
import { onMounted, reactive } from 'vue';
import { useRoute } from 'vue-router';


const data = reactive<customer_Dto>({
    isEdit: false,
    isFisrt: true,
    data: [],
    record_list: [],
    responsibility_list: [],

})

const route = useRoute();

const event = {
    edit() {
        data.isEdit = true
    },
    async save() {


        startloading()
        const res = await UpdateCustomer({
            id: route.params.id.toString(),
            name: data.data.name,
            phone: data.data.phone,
            wechat: data.data.wechat,
            address: data.data.address,
            remark: data.data.remark,
            responsibility: data.data.responsibility,
            record: data.data.record,
        })
        if (res.code === Api_Code.ok) {
            closeloading();
            methods.bind();
            msg(res)
            router.back()
        } else {
            closeloading();
            msg(res)
        }
    },

    async remoteMethod(query: string) {
        if (query !== '') {
            data.loading = true;
            const res = await GetAllUsers({
                key: query
            });
            data.loading = false;
            if (res.code === 0) {
                data.responsibility_list = res.data;
                data.record_list = res.data;
            } else {
                data.responsibility_list = [];
                data.record_list = [];
            }
        }
    },
}

const methods = {
    async bind() {
        const res = await GetCustomerById({
            id: route.params.id.toString()
        });

        if (res.code === Api_Code.ok) {
            data.isFisrt = false;
            data.data = res.data;

        }


    }
}

onMounted(async () => {
    await methods.bind();

})

</script>

<style scoped></style>